<template>
  <el-container>
    <!-- 颜色 -->
    <el-aside width="auto">
      <el-col :span="12">
        <h1 :class="hjn.isCollapse ? 'guan' : 'kai'">
          <img
            src="https://cdn7.axureshop.com/demo/2146223/images/%E5%B0%81%E9%9D%A2/u3.png"
            alt=""
            :class="hjn.isCollapse ? 'iguan' : 'ikai'"
          />
          {{ hjn.isCollapse ? "" : "商品管理系统" }}
        </h1>

        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#222"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="hjn.isCollapse"
          router
        >
          <el-submenu index="/hkongzhi">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>控制台</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hkongzhi" style="color: #fff"
                >控制台</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商城管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/shoplist">商品管理</el-menu-item>
              
              <el-menu-item index="/com">评论管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/order">订单管理</el-menu-item>
              <el-menu-item index="/home/lzsales">售后管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>轮播图管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/banner" style="color: #fff"
                >轮播图管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统管理</span>
            </template>
            
            <el-menu-item-group>
              
              <el-menu-item index="/home/staff">员工管理</el-menu-item>
              <el-menu-item index="/home/role">角色管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-aside>
    <el-container>
      <el-header>
        <nav class="nava">

          <i class="el-icon-s-unfold" v-if="hjn.isCollapse" @click="SET_STATEBOOL()"></i>
        <i class="el-icon-s-fold" @click="SET_STATEBOOL()" v-else></i>
        <div class="tou">
          <el-col :span="12">
      
      <div class="demo-basic--circle">
        <div class="block"><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <el-avatar :size="size" :src="circleUrl"></el-avatar>
        </div>
      </div>
        </el-col>
        <span class="ciir">
          
            <button class="hua" @click="layout">退出登录</button>
          
          
          </span>
        </div>
        </nav>     

          <i
            class="el-icon-s-unfold"
            v-if="hjn.isCollapse"
            @click="SET_STATEBOOL()"
          ></i>
          <i class="el-icon-s-fold" @click="SET_STATEBOOL()" v-else></i>
        

      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script >

import { mapMutations, mapState } from 'vuex';
import {tui} from "../api/link.js"





export default {
  computed: {
    ...mapState(["hjn"]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

     ...mapMutations(['SET_STATEBOOL']),
    layout(){
      
      var hah1=sessionStorage.getItem("name")
      var hah2=sessionStorage.getItem("password")

      
      console.log(hah1,hah2);
      tui(hah1,hah2).then((ok)=>{
        console.log(ok,88);
        if(ok.code==1014){
          this.$router.push("/denglu")
      sessionStorage.clear()
        }

      })

      this.$router.push("/denglu")
      localStorage.clear()


    },

  },

  data () {
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        sizeList:[]
        
      }
    },
};
</script>

<style scoped lang="scss">


.ciir{
  width: 30px;
  height: 10px;
  // background:palegoldenrod;
  // border-radius: 50%;
  position: relative;
}
.hua{
  width: 100px;
  height: 40px;
  background: #fff;
  position: absolute;
  font-size: 16px;
  text-align: center;
line-height: 40px;
  left: 10px;
  top: 5px;

  border: 0;
}
.hua a{
  color: #000;
}
.ciir i{
  font-size: 16px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 20px;
  // background: palegoldenrod;
}
.tou{
  width: 140px;
  height: 42px;
  // background: palegreen;
  position: absolute;
  top: 8px;
  right: 140px;
}

.nava {

  line-height: 60px;
  font-size: 24px;
  position: relative;
}
.el-header {
  background: #fff;
}

.el-aside {
  background: #222;
  height: 100%;
  width: auto;
}
.el-main {
  background: #eee;
  padding: 3px;
}
.el-menu {
  width: auto;
  border: none;
}
.el-menu span,
li {
  font-size: 16px;
  font-weight: 500;
}
.el-main,
.el-container,
.el-aside,
.common-layout {
  height: 100%;
}
.el-col {
  width: auto;
}
.ikai {
  width: 40px;
}
.iguan {
  width: 25px;
}
.kai {
  background: #00284d;
  height: 70px;
  width: 200px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.guan {
  background: #00284d;
  height: 70px;
  width: 64px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>